<template>
	<view>
		<TopTab v-if="pageType=='0'" :tabIndex="tabIndex" :tabs="tabs" @change="tabChange"></TopTab>
		<view class="artc-box" :style="{marginTop:pageType=='0'?'90rpx':'0'}">
			<mescroll-body class="water_scroll" ref="mescrollRef" @init="mescrollInit" :down="downOption"
				@down="downCallback" @up="upCallback">
				<template v-if="pageType=='0'">
					<view  class="artc-col" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)" style="height: 208rpx;">
						<view class="artc-col-l">
					    <view class="artc-col-l-t">{{item.newsTitle}}</view>
					    <text>{{item.typeName}} · {{item.publicTime}}</text>
						</view>
						<!--<image :src="item.newsPic" mode="center" style="width: 240rpx;height: 148rpx"></image>-->
            <view class="img-box">
              <u-image :src="item.newsPic?item.newsPic:'http://oss.lxiyun.com/files/2022/04/18/16502684745206513.png'" mode="aspectFill" width="240rpx" height="148rpx" style="display: flex;align-items: center;justify-content: center;overflow: hidden"></u-image>

            </view>
						<!--<view class="img-box">-->
						<!--	 <img :src="item.newsPic" alt="">-->
						<!--	&lt;!&ndash; <u-image  :src="item.newsPic" mode="center"></u-image> &ndash;&gt;-->
						<!--</view>-->

					</view>
				</template>
				<template v-else>
					<view  class="artc-col" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
						<view class="">
					    <view class="artc-col-l-t">{{item.noticeTitle}}</view>
							<view class="" style="width: 100%;;display: flex;margin-top: 20rpx">
								 <text style="padding: 2rpx 6rpx;background: #4cd964;color: #fff;border-radius: 4rpx;margin-right: 10rpx;">{{item.noticeType=='1'?'通知':'公告'}} </text>
								 <text> {{item.createTime}}</text>
							</view>
						</view>
					</view>
				</template>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabs: [
					'食谷动态',
					'政策速递'
				],
				downOption: {
					page: {
						num: 0,
						size: 10,
						time: null,
					},
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
				},
				tabIndex: '',
				dataList: [],
				pageType:0
			};
		},
		onLoad(op) {
			this.pageType=op.pageType
			if(op.pageType=='0'){
				this.tabs=[
					'食谷动态',
					'政策速递'
				]
			}else{
        uni.setNavigationBarTitle({
        	title:'通知'
        })
			}
      this.tabIndex=op.index
			console.log("this.tabIndex",this.tabIndex);
    },
		methods: {
      tabChange(index){
        this.tabIndex=index
        this.dataList=[]
        this.mescroll.resetUpScroll();
      },
      itemClick(item){
        if(this.pageType=='0'){
          this.navTo('/pagesPerson/article/articleInfo?pageType=0&id='+ item.id)
        }else{
          this.navTo('/pagesPerson/article/articleInfo?pageType=1&id='+ item.noticeId)
        }
      },
			downCallback() {
				this.dataList = []
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				//联网加载数据
				if(this.pageType=='0'){
					this.getNews(page)
				}else{
					this.getNotices(page)
				}
			},
			getNews(page){
				this.apis.commonApi
					.getNews({
						pageNum: page.num,
						pageSize: page.size,
				    typeName:this.tabIndex==0?'食谷动态':'政策速递'
					})
					.then((res) => {
						this.dataList = this.dataList.concat(res.rows);
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				});
			},
			getNotices(page){
				this.apis.commonApi
					.getNotices({
						pageNum: page.num,
						pageSize: page.size
					})
					.then((res) => {
						this.dataList = this.dataList.concat(res.rows);
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				});
			},
		}
	}
</script>

<style lang="scss">
	.artc-box {
		padding: 20rpx;
		margin-top: 90rpx;

		.artc-col {
			margin-bottom: 20rpx;
			width: 100%;
			overflow: hidden;
			padding: 30rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.artc-col-l{
        width: 378rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .artc-col-l-t{
          width: 378rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #333333;
          line-height: 35rpx;
          overflow: hidden;
          text-overflow: ellipsis;//文本超出省略
          display: -webkit-box;
          -webkit-line-clamp: 2;//第几行省略就设置第几行
          //提示打包的时候这里不做处理
          /* autoprefixer: off */
          -webkit-box-orient: vertical;
        }

        text{
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
        }
			}
			//image{
			//	width: 212rpx;
			//}

      .atc-img{
        width: 240rpx;
        height: 148rpx;
      }

			.img-box{
				width: 240rpx;
        height: 148rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}


	}


</style>
